<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Magic Notes · 魔力笔记</title>
    <link rel="stylesheet" href="/static/style.css" />
</head>
<body>
    <div id="app">
        <h1>Magic Notes 魔力笔记</h1>

        <!-- 登录表单 -->
        <div id="loginBox">
            <h2>用户登录</h2>
            <form id="loginForm">
                <input name="username" placeholder="用户名" required />
                <input name="password" type="password" placeholder="密码" required />
                <button type="submit">登录</button>
            </form>
            <p id="loginMsg"></p>
            <button id="showRegBtn" type="button">还没有账号？去注册</button>
        </div>

        <!-- 注册表单（默认隐藏） -->
        <div id="regBox" style="display:none;">
            <h2>创建账号</h2>
            <form id="regForm">
                <input name="username" placeholder="用户名" required />
                <input name="email" type="email" placeholder="邮箱" required />
                <input name="password" type="password" placeholder="密码" required />
                <button type="submit">注册</button>
            </form>
            <p id="regMsg"></p>
            <button id="showLoginBtn" type="button">返回登录</button>
        </div>
    </div>

    <script>
        // 元素引用
        const loginBox = document.getElementById('loginBox');
        const regBox   = document.getElementById('regBox');
        const loginMsg = document.getElementById('loginMsg');
        const regMsg   = document.getElementById('regMsg');

        // 切换显示
        const showLogin = () => { loginBox.style.display='block'; regBox.style.display='none'; };
        const showReg   = () => { loginBox.style.display='none'; regBox.style.display='block'; };

        document.getElementById('showRegBtn').onclick = showReg;
        document.getElementById('showLoginBtn').onclick = showLogin;

        // 注册逻辑
        document.getElementById('regForm').addEventListener('submit', async e => {
            e.preventDefault();
            const fd = new FormData(e.target);
            const res = await fetch('/api/register', {
                method: 'POST',
                headers: {'Content-Type':'application/json'},
                body: JSON.stringify(Object.fromEntries(fd))
            });
            const data = await res.json();
            if (res.ok) {
                regMsg.style.color='green';
                regMsg.innerText = data.message;
                e.target.reset();
                setTimeout(showLogin, 1500); // 1.5 秒后回到登录
            } else {
                regMsg.style.color='red';
                regMsg.innerText = data.detail || '注册失败';
            }
        });

        // 登录逻辑（占位，可扩展）
        document.getElementById('loginForm').addEventListener('submit', async e => {
            e.preventDefault();
            const fd = new FormData(e.target);
            const res = await fetch('/api/login', {
                method: 'POST',
                headers: {'Content-Type':'application/json'},
                body: JSON.stringify(Object.fromEntries(fd))
            });
            const data = await res.json();
            loginMsg.style.color = res.ok ? 'green' : 'red';
            loginMsg.innerText = data.message || data.detail;
            if (res.ok) {
                // 这里可跳转到笔记主页
                // window.location.href = '/notes';
            }
        });
    </script>
</body>
</html>